<template>
  <Form :model="formItem"
        :rules="ruleInline"
        :label-width="80"
        ref="object_form">

    <Alert show-icon>
      用户基本信息
      <Icon type="ios-lightbulb-outline" slot="icon"></Icon>
    </Alert>


    <FormItem label="用户编号" prop="code" style="margin-top: 20px;">
      <Input v-model="formItem.code" placeholder="请输入用户编号..."></Input>
    </FormItem>

    <FormItem label="用户账号" prop="regname" style="margin-top: 20px;">
      <Input v-model="formItem.regname" placeholder="请输入用户账号..."></Input>
    </FormItem>

    <FormItem label="姓名" prop="name" style="margin-top: 20px;">
      <Input v-model="formItem.name" placeholder="请输入姓名..."></Input>
    </FormItem>

    <FormItem label="姓别" prop="sex" style="margin-top: 20px;">
      <Select v-model="formItem.sex" style="width:200px">
        <Option v-for="item in sex_list" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    </FormItem>

    <FormItem label="证件类型" prop="certificate_type" style="margin-top: 20px;">
      <Select v-model="formItem.certificate_type" style="width:200px">
        <Option v-for="item in certificate_type_list" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    </FormItem>

    <FormItem label="证件号码" prop="certificate" style="margin-top: 20px;">
      <Input v-model="formItem.certificate" placeholder="请输入手机号码..."></Input>
    </FormItem>

    <FormItem label="手机号码" prop="phone" style="margin-top: 20px;">
      <Input v-model="formItem.phone" placeholder="请输入手机号码..."></Input>
    </FormItem>

    <FormItem label="电子邮箱" prop="email" style="margin-top: 20px;">
      <Input v-model="formItem.email" placeholder="请输入电子邮箱..."></Input>
    </FormItem>

    <FormItem label="备注" prop="comment">
      <Input v-model="formItem.comment" placeholder="请输入个人签名..."></Input>
    </FormItem>

    <FormItem>
      <Button type="primary" @click="handleSubmit">提交</Button>
      <Button type="primary" @click="handleReturn" style="margin-left: 8px">返回</Button>
      <Button type="primary" @click="handleReset" style="margin-left: 8px">清空</Button>
    </FormItem>
  </Form>
</template>
<script>


  export default {
    data() {
      return {
        formItem: {
          code: "",
          regname: "",
          name: "",
          sex: "",
          certificate_type: "",
          certificate: "",
          phone: "",
          email: "",
          comment: ""
        },
        ruleInline: {
          code: [
            {required: true, message: '此项为必添项!', trigger: 'blur'},
            {max: 50, message: "长度不可以超过50!", trigger: 'blur'}
          ],
          regname: [
            {required: true, message: '此项为必添项!', trigger: 'blur'},
            {max: 50, message: "长度不可以超过50!", trigger: 'blur'}
          ],
          name: [
            {required: true, message: '此项为必添项!', trigger: 'blur'},
            {max: 50, message: "长度不可以超过50!", trigger: 'blur'}
          ],
          sex: [
            {required: true, message: '此项为必添项!', trigger: 'blur'}
          ],
          certificate: [
            {max: 50, message: "长度不可以超过50!", trigger: 'blur'}
          ],
          phone: [
            {max: 18, message: "长度不可以超过18!", trigger: 'blur'}
          ],
          email: [
            {max: 50, message: "长度不可以超过50!", trigger: 'blur'}
          ],
          comment: [
            {max: 200, message: "长度不可以超过50!", trigger: 'blur'}
          ]
        },
        tree_data: [],
        sex_list: [{
          value: "-1",
          label: "请选择性别"
        }, {
          value: "男",
          label: "男"
        }, {
          value: "女",
          label: "女"
        }],
        certificate_type_list: [{
          value: "-1",
          label: "请选择证件类型"
        }, {
          value: "身份证",
          label: "身份证"
        }, {
          value: "军官证",
          label: "军官证"
        }, {
          value: "港澳通行证",
          label: "港澳通行证"
        }, {
          value: "护照",
          label: "护照"
        }, {
          value: "医保",
          label: "医保"
        }]
      }
    },
    components: {},
    beforeCreate: function () {
      this.$Spin.show();
    },
    created: function () {
      const id = this.params.id;
      if ("" != id) {//这个说明是修改，要发请求获得更有的数据
        this.$http.get(this.apiUrl() + 'user/get/' + id, {}, {
          emulateJSON: true
        }).then((response) => {
          if (response && response.body.success) {
            this.formItem.code = response.body.user.code;
            this.formItem.regname = response.body.user.regname;
            this.formItem.name = response.body.user.name;
            this.formItem.sex = response.body.user.sex;
            this.formItem.certificate_type = response.body.user.certificate_type;
            this.formItem.certificate = response.body.user.certificate;
            this.formItem.phone = response.body.user.phone;
            this.formItem.email = response.body.user.email;
            this.formItem.comment = response.body.user.comment;
          } else {
            if (response.body.msg === 'session-timeout') {
              window.location.href = "/";
            } else {
              this.$Notice.error({title: "错误", desc: response.body.msg});
            }
          }
          this.$Spin.hide();
        });
      } else {
        this.$Spin.hide();
      }
      this.loadTreeData(id);
    },
    methods: {
      handleSubmit: function () {
        this.$refs['object_form'].validate((valid) => {
          if (valid) {
            this.$http.post(this.apiUrl() + 'user/save/', {
              code: this.formItem.code,
              regname: this.formItem.regname,
              name: this.formItem.name,
              comment: this.formItem.comment,
              id: this.params.id,
              group_id: this.params.group_id,
              certificate_type: this.formItem.certificate_type,
              certificate: this.formItem.certificate,
              phone: this.formItem.phone,
              email: this.formItem.email,
              sex: this.formItem.sex
            }, {
              emulateJSON: true
            }).then((response) => {
              if (response.body.success) {
                this.$Message.success(response.body.msg);
                this.$emit('childClickMenu', '基础数据', '用户管理', 'user_list');
              } else {
                this.$Notice.error({title: '错误', desc: response.body.msg});
              }
            });
          } else {
            this.$Notice.error({title: '错误', desc: "请输入完事信息后进行提交!"});
          }
        })
      },
      /**
       * 返回到权限列表页
       */
      handleReturn: function () {
        this.$emit('childClickMenu', '基础数据', '学员管理', 'user_list');
      },
      handleReset: function () {
        this.$refs['object_form'].resetFields();
      },
      /**
       * 加载权限树的方法
       */
      loadTreeData: function (id) {
        this.$http.get(this.apiUrl() + "role/tree/" + id, {}, {
          emulateJSON: true
        }).then((response) => {
          this.tree_data = response.body;
        });
      },
    },
    props: ['params']
  }
</script>
<style scoped>

</style>
